<template>
  <div class="box">
    <h1>组件间通信: 消息订阅与发布</h1>
    <Child1 />
    <Child2 />
  </div>
</template>

<script lang="ts" setup>
// Pubsub 用于跨组件之间的通信,在vue3中总线被移除了
// 1. 下载安装
//    npm i pubsub-js
// 2. 在接收数据的组件中,订阅消息,留下回调,接收参数
//    Pubsub.subscribe('receiveData', receiveData)
//    注意: 接收消息的回调中,参数一是消息类型,参数二才是我们传递的参数
// 3. 在发送数据的组件中,发布消息,传递参数
//    Pubsub.publish('receiveData', '我爱你');
// ---------------------------------------------
// 当我们使用pubsub的时候,引入可能会飘红(这里没有飘红是我们已经做过处理了)
//      import Pubsub from 'pubsub-js'  // ----> 这句可能会飘红
// 在使用【有些】第三方库的时候,由于第三方库的作者没有适配TS
// 此时在引入这些第三方库的时候,咱们项目中集成的TS并不认识这些库
// 此时就会飘红,如何解决这个飘红?
// 需要我们自己告诉项目的TS,这是第三方库,TS你不用惊讶,不要给我飘红,我知道怎么用
// 此时需要在 根目录下的 .d.ts 文件中去声明一下 第三方库
// .d.ts文件
// declare module 'pubsub-js'
// declare 用来声明模块或者类型的,告诉整个项目中集成的TS,现在已经有这个类型了
// module 是用来声明模块的
// ----
// declare type str = string
// declare 在声明类型
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
</script>